<html>
<head>
    <title>区域管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">场景设置</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree" v-on:click-node="onTreeNode"  :tabsign="'p'" :energy="'Total'" ></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item>
                            <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="right" >
                                <el-button type="success" @click="addClick" style="float: right"  :disabled="proNo==null?true:false">新增</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="sceneList" border stripe >
                    <el-table-column prop="SceneID" label="场景Id"   align="center" >

                    </el-table-column>
                    <el-table-column prop="SceneName" label="场景名称"  align="center">

                    </el-table-column>
                     <el-table-column prop="ImageName" label="图片"  align="center">
                         <template   slot-scope="scope">
                             <a :href="imageUrl+scope.row.ImageName"  class="swipebox" title="ESC键退出">
                             <img :src="imageUrl+scope.row.ImageName"  style="max-width:80px;max-height: 80px " />
                             </a>
                         </template>
                     </el-table-column>
                    <el-table-column label="操作"  align="center" >
                        <template slot-scope="scope">
                            <el-button  round size="small"  icon="el-icon-edit" title="修改" @click="editBtn(scope.row)"></el-button>
                            <el-button  round icon="el-icon-delete"  size="small" title="删除" @click="delBtn(scope.row.SceneID)"></el-button>
                        </template>
                    </el-table-column>>
                </el-table>
            </el-col>
            <el-dialog title="新增场景"
                       :visible.sync="addFormVisible"
                       center
                       width="35%">
                <el-form ref="addForm" :model="addForm" label-width="80px">
                    <el-form-item label="场景名称" prop="SceneName"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="addForm.SceneName" ></el-input>
                    </el-form-item>
                    <el-form-item label="场景图片">
                        <el-upload
                                class="upload-demo"
                                drag
                                action="http://iot.hzcando.com/api/idm/v1/ScadaScene/Add"
                                :headers="headers"
                                name="ImageName"
                                :data="addForm"

                                :limit="1"
                                :auto-upload="false"
                                ref="upload">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelClick('addForm')" style="background-color: #7eb8b0  ">取消</el-button>
                    <el-button  @click="submitClick('upload')" style="margin-left: 40px;background-color: #f9b317;">提交</el-button>
                </div>
            </el-dialog>
            <el-dialog title="编辑场景"
                       :visible.sync="editFormVisible"
                       center
                       width="35%">
                <el-form ref="editForm" :model="editForm" label-width="80px">
                    <el-form-item label="场景名称" prop="SceneName"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="editForm.SceneName" ></el-input>
                    </el-form-item>
                    <el-form-item label="场景图片">
                        <el-upload
                                class="upload-demo"
                                drag
                                action="http://iot.hzcando.com/api/idm/v1/ScadaScene/Update"
                                :headers="headers"
                                name="ImageName"
                                :data="editForm"
                                :limit="1"
                                :auto-upload="false"
                                ref="upload2">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelClick('editForm')" style="background-color: #7eb8b0  ">取消</el-button>
                    <el-button  @click="editClick('editForm')" style="margin-left: 40px;background-color: #f9b317;">保存</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>


</div>



<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>
    jQuery(function($) {
        $(".swipebox").swipebox();
    });
    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
           proNo:null,
            sceneList:[],
            imageUrl:'http://iot.hzcando.com:10004',
            tooltip:false,
            addFormVisible:false,
            addForm:{
                SceneName:'',
                projectNo:'',
            },
            headers:{
                uid:'',
                token:'',
            },
            uploadData:{
                 SceneID: '',
            },
            uploadVisible:false,
            editForm:{
                SceneID:'',
                SceneName:'',
            },
            editFormVisible:false,
        },
        methods:{

            onTreeNode:function(data){
                this.currentId = data.id;
                var ids =this.currentId.split('_');
                this.proNo=null;
                this.addForm.projectNo='';
                if(ids[0]!='P'){
                      return;
                }
                this.proNo = data.attributes.projectNo;
                this.addForm.projectNo = data.attributes.projectNo;
                this.getScene();
            },
            addClick(){
             this.addFormVisible=true;
            },
            uploadImg(id){
                this.uploadData ={
                    SceneID : id
                }
                this.uploadVisible=true;
            },
            editBtn(row){
                this.editFormVisible = true;
                this.editForm={
                    SceneName:row.SceneName,
                    SceneID:row.SceneID,
                    projectNo:row.projectNo,
                };
            },
            delBtn(id){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('ScadaScene/Delete',{SceneID:id}).success((res)=>{
                        this.getScene();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editClick(){
              HttpUtil.get('ScadaScene/Update',this.editForm).success((res)=>{
                  this.$refs['upload2'].submit();
                  this.$message.success('修改成功');
                  this.editFormVisible = false;
                  this.getScene();
              })
            },
            submitClick(name){
                this.$refs[name].submit();
                this.$message.success('提交成功');
                this.addFormVisible = false;
                this.getScene();
            },
            cancelClick(name){
              switch (name) {
                  case 'addForm':
                      this.addForm = {};
                      this.addFormVisible = false;
                      break;
                  case 'editForm':
                      this.editFormVisible=false;
                      this.editForm = {};
                      break;
              }

            },
            getScene(){
                HttpUtil.get('ScadaScene/List',{projectNo:this.proNo}).success((res)=>{
                    this.sceneList = res.data;
                })
            }
        },
        created:function(){
             this.headers={
                 uid:SiteConfig.account.uId,
                 token:SiteConfig.account.accessToken
             }
        },
        mounted:function(){
            this.tooltip = true;
        }
    });


</script>

</body>
</html>
